<template>
	<div class="all">
		<div class="li" v-for="item in list" :key="item.id">
			<div class="img"><img :src="item.image"></div>
			<div style="padding: 0.2rem;">
				<div style="color: #2D3038; font-size: 0.32rem; margin-bottom: 0.2rem;">{{item.name}}</div>
				<div class="flex" style="margin-bottom: 0.2rem;">
					<div><img src="../../static/img/bisaishijian.png" style="width: 0.28rem; margin-right: 0.2rem; display: block;"></div>
					<div class="wz" style=" margin-right: 0.4rem;">{{item.game_start}}</div>
					<div><img src="../../static/img/bisaididian.png" style="width: 0.28rem; margin-right: 0.2rem; display: block;"></div>
					<div class="wz">{{item.city}}</div>
				</div>
				<div class="wz" style="font-size: 0.25rem;">报名截止日期：{{item.volunteer_sign_end}}</div>
				<div class="wz" v-if="item.status == 2" style="margin-top: 0.2rem; color: #FF0000;">报名已拒绝，请重新报名</div>
				<div class="baoming" @click="baoming(item.id)" v-if="item.status == -1 ">报名</div>
				<div class="baoming" style="background: #eaeaea;" v-if="item.status == 1">报名审核中</div>
				<div class="baoming" style="background: #66A7FF;" v-if="item.status == 0">已报名</div>
			</div>
			
		</div>
		
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: 'list',
		data() {
			return {
				list:"",
				status:""
			}
		},
		created() {
			this.getlist()
		},
		methods: {
			
			//获取4个数
			getlist:function() {
				axios.get(this.urls+'/photographer/games?page=1&page_size=1000').then((response) => {
					if (response.data.msg.code == 0) {
						this.list = response.data.data.data
					}else{
						this.$toast(response.data.msg.info);
					}
				})
			},
			baoming:function(id){
				axios.post(this.urls+'/photographer/apply',{game_id:id}).then((response) => {
					if (response.data.msg.code == 0) {
						this.list = response.data.data.data
						this.getlist()
					}else{
						this.$toast(response.data.msg.info);
					}
				})
			},
			//登陆
			login: function() {
				//测试登录
				this.axios.post(this.urls+`/web/user/login?username=admin&password=123456`)
					.then(response => {
						if (response.data.success == true) {
							this.person = response.data.result.userInfo
							this.$router.push('/')
						} else {
							this.$message.error(response.data.msg.info);
						}
					})
				
				//微信登录
				// this.axios.post(this.urls+`/mobile/api/wechatLogin?code=`+this.$route.query.code)
				// 	.then(response => {
				// 		if (response.data.success == true) {
				// 			this.person = response.data.result.userInfo
				// 			localStorage.setItem('token', response.data.result.token)
				// 			this.$router.push('/')
				// 		} else {
				// 			this.$message.error(response.data.message);
				// 		}
				// 	})
					
			}
		},

	}
</script>

<style scoped lang="less">
	.all {
		

		.li{ width: 6.9rem; border-radius: 0.2rem; overflow: hidden; background: #FFFFFF; position: relative; margin-bottom: 0.3rem;  box-shadow: 2px 2px 5px #ccc;
			.img{
				img{ width: 100%; display: block;}
			}
			.wz{line-height: 0.25rem; color: #868B98; font-size: 0.25rem;}
			.baoming{ position: absolute; bottom: 0.2rem; right: 0.2rem; font-size: 0.28rem; background: #E53349; height: 0.6rem; display: flex; align-items: center; width: 1.8rem; color:#FFFFFF; justify-content: center; border-radius: 0.3rem;}
		}
		.logo {
			text-align: center;
			margin-bottom: 20px;
		}

		.title {
			font-size: 25px;
			text-align: center;
			margin-bottom: 50px;
			font-weight: bold;
			background-image: linear-gradient(135deg, red, blue);
			-webkit-background-clip: text;
			color: transparent;
		}
	}
</style>
